<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div>
        <category-list @select="categorySelect"></category-list>
      </div>
    </el-col>
    <el-col :span="18">
      <div>
        <el-button type="primary" @click="getAllCategory(); addDialog = true">新增规格参数</el-button>
      </div>
      <div>
        <el-table :data="attributeList">
          <el-table-column prop="id" label="编号"/>
          <el-table-column prop="attrName" label="属性名"/>
          <el-table-column  label="属性类型">
            <template #default="scope">
              <span v-if="scope.row.attrType==0">销售属性</span>
              <span v-if="scope.row.attrType==1">规格参数</span>
              <span v-if="scope.row.attrType==2">规格参数和销售属性</span>
            </template>
          </el-table-column>
          <el-table-column prop="valueSelect" label="可选值列表"/>
          <el-table-column prop="categoryId" label="所属三级分类"/>
          <el-table-column prop="groupName" label="所属分组"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-text type="danger" @click="openUpdate(scope.row)">修改</el-text>
              <el-divider direction="vertical"/>
              <el-text type="danger" @click="del(scope.row)">删除</el-text>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
  <el-dialog
      v-model="addDialog"
      title="新增规格参数"
      width="55%"
      @close="fromRef.resetFields()"
  >
    <div>
      <el-form size="large" label-width="100" :model="addAttrData" ref="fromRef" :rules="rules" :inline="true">
        <el-form-item label="属性名" prop="attrName">
          <el-input placeholder="请输入属性名" v-model="addAttrData.attrName"></el-input>
        </el-form-item>
        <el-form-item label="属性类型" prop="attrType">
          <el-select v-model="addAttrData.attrType" class="m-2" placeholder="请选择" size="large">
            <el-option label="销售属性" :value="0"/>
            <el-option label="规格参数" :value="1"/>
            <el-option label="规格参数和销售属性" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input placeholder="请输入" v-model="addAttrData.icon"></el-input>
        </el-form-item>
        <el-form-item label="可选值列表" prop="valueSelect">
          <el-select v-model="addAttrData.valueSelect" clearable placeholder="Select"  filterable allow-create>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId">
          <el-cascader v-model="addAttrData.categoryId" :options="categorys" clearable :show-all-levels="false"
                       :props="showProps"/>
        </el-form-item>
        <el-form-item label="所属分组" prop="attrGroupId">
          <el-select v-model="addAttrData.attrGroupId" class="m-2" placeholder="请选择" size="large"
                     @visible-change="getAttrGroupByCateId(addAttrData.categoryId)" :disabled="addAttrData.attrType==0">
            <el-option
                v-for="item in attrGroupList"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      <div>
        <el-form-item label="是否被检索" prop="searchType">
          <el-switch v-model="addAttrData.searchType" active-value="0" inactive-value="1"/>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-switch v-model="addAttrData.state" active-value="0" inactive-value="1"/>
        </el-form-item>
        <el-form-item label="是否快速展示" prop="showDesc">
          <el-switch v-model="addAttrData.showDesc" active-value="0" inactive-value="1"/>
        </el-form-item>
      </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAdd(fromRef)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="modifySwitch"
      title="修改规格参数"
      width="55%"
      @close="fromRef.resetFields()"
  >
    <div>
      <el-form size="large" label-width="100" :model="modifyAttr" ref="fromRef" :rules="rules" :inline="true">
        <el-form-item label="属性名" prop="attrName">
          <el-input placeholder="请输入属性名" v-model="modifyAttr.attrName"></el-input>
        </el-form-item>
        <el-form-item label="属性类型" prop="attrType">
          <el-select v-model="modifyAttr.attrType" class="m-2" placeholder="请选择" size="large">
            <el-option label="销售属性" :value="0"/>
            <el-option label="规格参数" :value="1"/>
            <el-option label="规格参数和销售属性" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input placeholder="请输入" v-model="modifyAttr.icon"></el-input>
        </el-form-item>
        <el-form-item label="可选值列表" prop="valueSelect">
          <el-select v-model="modifyAttr.valueSelect" clearable placeholder="Select"  filterable allow-create>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId">
          <el-cascader v-model="modifyAttr.categoryId" :options="categorys" clearable :show-all-levels="false"
                       :props="showProps"/>
        </el-form-item>
        <el-form-item label="所属分组" prop="attrGroupId">
          <el-select v-model="modifyAttr.attrGroupId" class="m-2" placeholder="请选择" size="large"
                     @visible-change="getAttrGroupByCateId(modifyAttr.categoryId)" :disabled="modifyAttr.attrType==0">
            <el-option
                v-for="item in attrGroupList"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="是否被检索" prop="searchType">
            <el-switch v-model="modifyAttr.searchType" active-value="0" inactive-value="1"/>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-switch v-model="modifyAttr.state" active-value="0" inactive-value="1"/>
          </el-form-item>
          <el-form-item label="是否快速展示" prop="showDesc">
            <el-switch v-model="modifyAttr.showDesc" active-value="0" inactive-value="1"/>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifySwitch = false">取消</el-button>
        <el-button type="primary" @click="submitModify(fromRef)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from "vue";
import CategoryList from '@/components/CategoryList/CategoryList'
import {getAttrGroupByCategoryId, getAttrByCategoryId, addAttr,modifyAttrApi} from "@/api/home/goods/attrGroup";
import {getAllCategoryToTree,} from "@/api/home/goods/category";

let selectCategory = ref()
let fromRef = ref()
let attributeList = ref([])
let addDialog = ref(false)
let categorys = ref([])
let attrGroupList = ref([])
let modifyAttr=ref({})
let modifySwitch=ref(false)
let addAttrData = reactive(({
  attrName: '',
  searchType: '0',
  icon: '',
  //TODO 这里会变成数组类型，但是后端接受的是字符串，需要修改
  valueSelect: '',
  attrType: 1,
  state: '0',
  categoryId: '',
  showDesc: '0',
  attrGroupId: ''
}))
let showProps = reactive({
  label: 'name',
  value: 'id',
  children: 'children',
  emitPath: false
})

/*获取所有分类数据*/
function getAllCategory() {
  getAllCategoryToTree().then(res => {
    categorys.value = res.data
  })
}

/*获取一个分类下的属性分组数据*/
function getAttrGroupByCateId(categoryId) {
  getAttrGroupByCategoryId(categoryId).then(res => {
    attrGroupList.value = res.data
  })
}

function categorySelect(node) {
  //TODO 此处不知道是否需要，只需要注意新增表单的默认所属分类(左侧点击了三级分类，再点击新增的时候默认所属分类显示）这里是否会用到，否则就可以删除
  selectCategory.value = node
  /*其他操作*/
  getAttrByCategoryId(node.id,3).then(res=>{
    attributeList.value=res.data
  })
}

function submitAdd(r) {
  r.validate((v) => {
    if (v) {
      addAttr(addAttrData)
      addDialog.value=false
    }
    else return false
  })
}
function openUpdate(selectAttribute){
  modifyAttr.value=selectAttribute
  modifySwitch.value=true
}
function submitModify(){
  modifyAttrApi(modifyAttr.value).then(res=>{
  //  刷新
  })
  modifySwitch.value=false
}

let rules = {
  attrName: [
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ],
  categoryId: [
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ],
  attrType:[
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ]
}

</script>

<style scoped>

</style>
